<template>
  <div class="emailbody">
    <el-container>
      <el-main height="">
        <!-- Main content -->
        <el-tabs v-model="activeName" type="card" tab-position="top">
          <el-tab-pane label="写信" name="send">
            <div class="sendmail">
              <el-form
                :model="email"
                ref="form"
                label-width="80px"
                :inline="false"
                size="normal"
              >
                <el-form-item label="收件人">
                  <el-input v-model="email.address"></el-input>
                </el-form-item>
                <el-form-item label="主题">
                  <el-input v-model="email.title"></el-input>
                </el-form-item>

                <el-form-item label="正文">
                  <el-input type="textarea" :rows="16" v-model="email.content">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="sendemail">发送</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="收信" name="get">
            <el-table size="medium" height="70vh" :data="library" border stripe>
              <el-table-column
                v-for="col in columns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
              >
              </el-table-column>
              <el-table-column width="220px">
                <template slot="header" slot-scope="{}">
                  <el-input
                    v-model="search"
                    placeholder="请输入搜索"
                    clearable
                    size="mini"
                  ></el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleCheck(scope.$index, emaildata)"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click.native.prevent="
                      handleDelete(scope.$index, emaildata)
                    "
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pageStyle">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :page-sizes="[1, 5, 10, 20]"
                layout="total,prev, pager, next, jumper"
                :total="emaildata.length"
                :page-count="emaildata.length / pageSize"
                hide-on-single-page
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-aside width="200px">
        <!-- Aside content -->
        <h4 style="margin-bottom: 5px; margin-left: 10px">通讯录</h4>
        <p style="color: #cbcbcb; text-align: center; margin: 0px">
          -—————————-
        </p>
        <el-menu
          unique-opened
          @select="sel"
          background-color="#F6F6F6"
          text-color="#354B66"
          default-active="public"
          class="el-menu-vertical-demo"
        >
          <el-submenu index="public">
            <template slot="title">
              <span>公共通讯录</span>
            </template>
            <el-menu-item
              v-for="(item, i) in publicform"
              :key="i"
              :index="item.email"
              >{{ item.name }}</el-menu-item
            >
          </el-submenu>
          <el-submenu index="personal">
            <template slot="title">
              <span>个人通讯录</span>
            </template>
            <el-menu-item
              v-for="(item, i) in personalform"
              :key="i"
              :index="item.email"
              >{{ item.name }}</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>
    </el-container>
    <el-dialog title="邮件详情" :visible.sync="emailVisible">
      <div class="dialogform">
        <!-- {{libraryitem}} -->
        <el-form
          :model="emailform"
          ref="form"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="时间">
            <el-input v-model="emailform.time"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="emailform.title"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="emailform.author"></el-input>
          </el-form-item>
          <el-form-item label="正文">
            <el-input
              type="textarea"
              :rows="13"
              v-model="emailform.content"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emailVisible: false,
      search: "",
      pageSize: 9,
      currentPage: 1,
      email: {
        address: "",
        title: "",
        content: "",
      },
      columns: [
        { label: "时间", id: "time" },
        { label: "标题", id: "title" },
        { label: "作者", id: "author" },
      ],
      activeName: "send",
      publicform: [],
      personalform: [],
      emaildata: [],
      emailform: {
        time: "",
        title: "",
        author: "",
        content: "",
      },
    };
  },
  computed: {
    library: function () {
      return this.emaildata
        .filter(
          (data) =>
            !this.search ||
            data.time.toLowerCase().includes(this.search.toLowerCase()) ||
            data.title.toLowerCase().includes(this.search.toLowerCase()) ||
            data.author.toLowerCase().includes(this.search.toLowerCase())
        )
        .slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
    },
  },
  methods: {
    sel(e) {
      this.email.address = e;
    },
    sendemail() {
      this.$message({
        type: "success",
        message: "发送成功",
      });
      for (let key in this.email) {
        this.email[key] = "";
      }
    },
    handleCheck(i, e) {
      console.log(e[i]);
      this.emailform = e[i];
      this.emailVisible = true;
    },
    handleDelete(i) {
      this.emaildata.splice(i, 1);
    },
    //  页面更换
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  created() {
    this.$http
      .get("/data/public.json")
      .then((result) => {
        //   console.log(result);
        this.publicform = result.data.data;
        // console.log(this.public);
      })
      .catch((err) => {
        console.log(err);
      });
    this.$http
      .get("/data/personal.json")
      .then((result) => {
        //   console.log(result);
        this.personalform = result.data.data;
        // console.log(this.personal);
      })
      .catch((err) => {
        console.log(err);
      });
    this.$http
      .get("/data/email.json")
      .then((result) => {
        //   console.log(result);
        this.emaildata = result.data.data;
        // console.log(this.personal);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style >
.emailbody {
  height: 75vh;
}
.emailbody .el-menu {
  height: 500px;
  overflow-x: hidden;
}
</style>